<template>
	<div>
		<ul>
			<li v-for="info in infos" is="notify-item" :info="info"><span class="text">{{info.text}}</span></li>
		</ul>
		
	</div>
</template>
<script>
	import Switch from './../public/Switch'
	import NotifyItem from './NotifyItem'
	export default {
		data: function () {
			return {
				infos: [
					{
						text: '喜欢',
						state: this.like,
						key: 'like'
					},
					{
						text: '评论',
						state: this.comment,
						key: 'comment'
					},
					{
						text: '私信',
						state: this.letter,
						key: 'letter'
					}
				]
			}
		},
		components: {
			Switch,
			NotifyItem
		},
		vuex: {
			getters: {
				like: function (state) {
					return state.set.like
				},
				comment: function (state) {
					return state.set.comment
				},
				letter: function (state) {
					return state.set.letter
				}
			}
		}
	}
</script>
<style scoped>
	ul {
		list-style: none;
		padding:0 25px;
	}
	li {
		background-color: #FFF;
		padding: 20px 0 20px 20px;
		border-bottom:1px solid #ccc;
		display: flex;
	}
	.text {
		line-height: 26px;
		flex: 1;
	}
</style>
